<template>
  <tabbar>
    <div class="tab-top-box">
    <tabbar-item class="tab-top1">
      <span>AI FORCE</span>
    </tabbar-item>
    <tabbar-item class="tab-top2">
      <div>
      <span>隐私政策</span>
      <span>使用条款</span>
      <span>关于我们</span>
      <span>用户协议</span>
      <span>帮助中心</span>
      <span>侵权申诉</span>
      </div>
    </tabbar-item>
    </div>
    <tabbar-item><img src="../../../assets/images/分割线@1x.png" alt=""></tabbar-item>
    <div class="tab-bottom-box">
    <tabbar-item class="tabbar-left">© 2021 AI FORCE ALL rights reserved</tabbar-item>
    <tabbar-item class="tabbar-right">
    <span><img src="../../../assets/images/QQ.png" alt=""></span>
    <span><img src="../../../assets/images/weChat.png" alt=""></span>
    <span><img src="../../../assets/images/Vector.png" alt=""></span>
    <span><img src="../../../assets/images/Path.png" alt=""></span>
    </tabbar-item>
    </div>
  </tabbar>
</template>
<script>
import Tabbar from '../../common/tabbar/Tabbar.vue'
import TabbarItem from '../../common/tabbar/TabbarItem.vue'

export default {
  name:'MainTabbar',
  components:{
    Tabbar,
    TabbarItem
  }
}
</script>

<style>
.tab-top-box{
  padding: 30px 0 30px 0;
}
.tab-top-box .tab-top1{
  margin-bottom: 30px;
}
.tab-top-box .tab-top2 span{
  margin-left: 1.875rem;
  font-size: 14px;
  color: #ccc;
}
.tabbar-left{
  float: left;
  font-size: 15px;
  color: #ccc;
}
.tabbar-right{
  float: right;
  display: flex;
  flex: 1;
}
.tabbar-right span{
  margin-right: 1.5625rem;
}
.tabbar-right span img{
  width: .9375rem;
  height: .9375rem;
}
.tab-bottom-box{
  margin-top: 20px;
  padding: 0 200px;
}
</style>